<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
<div class="box"></div>


 <script>
/*
函数：功能的集合

函数声明
    函数声明 函数名是必须的
    function foo(){
        //需要执行的函数代码
    }





函数执行
     foo()


函数定制化执行，同一个函数 传入的参数不一样，执行效果就不一样

    形参：是变量

    实参：传入的是一个值

    形参 > 实参 多的形参就是undefined

    形参 < 实参 多的实参忽略



 表达式：一个能得出值的式子就是表达式
    运算，执行，单行代码都可以看成是表达式


返回值：
    任何的代码、表达式 都是有返回值的

    为什么要返回值：他的意义是什么？
        告诉浏览器代码执行完了


函数有返回值吗？
    如果没有定义函数的返回值，函数的返回值就是 undefined

怎么定义函数的返回值
    在函数内部使用 return 返回函数的返回值

    返回之后函数结束了吗？
        函数立马结束


函数相当于一个加工中心：
    有输入 有输出

    返回：return
    打印：console.log

阅读代码小技巧：
    函数只要没执行，就不用读它



函数声明和函数表达式：
    函数声明： function foo(){}

    函数表达式：函数表达式中，函数可以没有名字，函数名就是变量名


    //函数声明的表达式，本质上是表达式，有等号，即声明一个变量foo1，给他赋值，赋一个函数的值，
    等号右边的函数作为一个值而存在，表达式才有值，所以这个函数就是函数表达式
    let foo1 = function foo1(){
        console.log("foo1执行")
    }

    //函数声明
    function foo2(){
        console.log("foo2执行")
    }


*/

//制作蛋糕的函数
//function foo(){
//    return"蛋糕"
//}

//let obj = {
//   "蛋糕":"好吃"
//}


//console.log(obj[foo()]) //obj访问属性，这个属性是foo函数的执行结果，foo执行结果返回"蛋糕",那就是foo访问"蛋糕"这个属性，"蛋糕"这个属性就是"好吃"


//做一个加法器：接收两个参数，返回 两个参数的和的函数

//function sum(num1, num2){
//    let result = num1 + num2
//    return result
//    //以上两行代码可以简写成一行：ruturn num1 + num2
//}

//let a = sum(1, 2)
//console.log("a的值是：",a)

//情况一：
let box = document.querySelector(".box")

let handleClick = function(){
    console.log("box被点击了")
}

box.onclick = handleClick()

//以上三段代码是错误的
//let handleClick 创建了一个变量  handleClick，将其赋值等于一个函数 function(){console.log("box被点击了")}，
//而 handleClick() 的值，我们没有在其中定义其返回值，所以函数的返回值就是 undefined ，
//所以 handleClick() 的值就是 undefined ，而 box.onclick = handleClick() ,就等于我们将 undefined 赋值给了 box.onclick，
//所以 box.onclick 不会执行，如果要执行，要改成 box.onclick = handleClick，因为，当 handleClick 不加(),
//handleClick 的值就是等号右边的函数 function(){console.log("box被点击了")} ，只有当 box 被点击了，才会去执行后面的函数


//情况二：
let box = document.querySelector(".box")

let handleClick = function(){
    return function(){
        console.log("box被点击了")
    }
}
    
box.onclick = handleClick()
//box.onclick = handleClick() ,就是将函数 handleClick() 返回的返回值赋值给 box.onclick ，
//函数 handleClick() 执行中刚好定义了其返回值 return ，所以 box.onclick = handleClick() 就等价于将 return 后面的函数 function(){console.log("box被点击了")} 赋值给 box.onclick，
//即 box.onclick = function(){console.log("box被点击了")}



 </script>   
</body>
</html>